<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>在线聊天室</title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class='top'>
			<h5 style='padding-top:10px;'>致梦简易聊天室</h5>
			<span class='user_count' style='font-size:14px;'>当前在线人数：<b></b></span>
		</div>
		<div class='messages'>
			
			<!-- <div class='welcome'>欢迎语</div> -->
			<!-- <div class='left'>
				左边
			</div>

			<div class='right'>
				右边
			</div> -->
			
		</div>
	    <div class="input-group mb-3">
			<input type="text" id='text' class="form-control" placeholder="输入消息点击回车发送" aria-label="Recipient's username" aria-describedby="button-addon2">
			<div class="input-group-append">
				<button class="btn btn-outline-secondary" type="button" onclick="send()" id="button-addon2">发送</button>
			</div>
	    </div>
	</body>
</html>
<style type="text/css">
	.top{width:100%;height:13vh;background:white;text-align:center;}
 	.messages{width:100%;height: 60vh;padding-top: 20px;padding:0px 20px 0px 20px;background:#eee;overflow-y:auto;}
	.messages .left,.messages .right{
		width: 60vw;height: 5vh;border-radius: 10px;padding-left:10px;line-height:5vh;
	}
	.messages .left{background: white;margin:0px 30vw 20px 0px;}
	.messages .right{background: #ccc;margin:0px 0px 20px 30vw;}
	.messages .welcome{color:red;text-align:center;margin-bottom: 10px;}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
	var username = prompt('请输入您的昵称:');
	//创建web socket
	ws = new WebSocket("ws://127.0.0.1:2000");
	// ws = new WebSocket("ws://47.105.217.105:2000");
	//连接web socket
	ws.onopen = function() {
		if(username=='' || username==null){alert('昵称不可为空');location.reload();return;}
		console.log('连接成功');
		ws.send(JSON.stringify({type:'login',username:username}));
	};

	//收到消息 触发回调
	ws.onmessage = function(e) {
		var data = JSON.parse(e.data);
		console.log(data);
		//当前在线人数
		if(data.type=='online_user_count'){
			$('.user_count b').html(''+data.online_user_count+'');
		}
		//登录
		if(data.type=='new_user_login'){
			$('.messages').append('<div class="welcome">欢迎“'+data.username+'” 加入聊天室</div>');
		}
		
		//新消息
		if(data.type=='new_msg'){
			if(data.my_msg==0){
				$('.messages').append('<div class="left">'+data.username+' : '+data.content+'</div>');
			}else{
				$('.messages').append('<div class="right">'+data.username+' : '+data.content+'</div>');
			}
		}
		//用户断开连接
		if(data.type=='user_on_close'){
			$('.messages').append('<div class="welcome">“'+data.username+'” 离开了聊天室</div>');
		}
		
		$('.messages')[0].scrollTop = $('.messages')[0].scrollHeight;
	};
	
	//关闭web socket
	ws.onclose = function(){
		console.log('连接已关闭.....');
	}
	
	//回车发送
	$('#text').bind('keypress',function(event){
		if(event.keyCode == "13")    
		{
			send();
		}
	});

	//发送消息
	function send(){
		var content = $('.form-control').val();
		if(content==''){return;}
		var data = {
			type:'send_msg',
			username: username,
			content: content
		};
		//将数据发送服务端
		ws.send(JSON.stringify(data));
		$('.messages')[0].scrollTop = $('.messages')[0].scrollHeight;
		$('.form-control').val(null);
		$('.form-control').focus();
	}
</script>
